(一) js里的输出语句
<script>
// 输出到控制台
console.log('我爱web前端');
// 弹窗
alert('哈哈哈哈哈');
</script>
(二) 变量
js变量就是个容器, 是用来存放数据的
例1. 五种简单数据类型
<script>
// 1.存放数字类型
var money = 100;
// 2.存字符串类型
var username = '老胡';
var username2 = "老胡";
var username3 = `老胡`;
// 3.存布尔类型的数据
var isOpen = true;
var isOpen2 = false;
// 4.存空
var obj = null;
// 5.声明变量时, 不赋值, 则它的值为undefined
var age;
console.log('money的类型:',typeof money);
console.log('username的类型:',typeof username);
console.log('isOpen的类型:',typeof isOpen);
console.log('obj的类型:',typeof obj); // object
console.log('age的类型:',typeof age);
</script>
例2. 变量的赋值
<script>
// 变量的声明
var money;
console.log(1, money); // undefined
// 变量的赋值, =叫做赋值符号
money = 10000;
console.log(2,money);
money = 110;
console.log(3,money);
</script>
例3. 常量
<script>
// 常量的声明和赋值
const PI = 3.1415926535;
PI = 6666;
console.log(PI);
</script>
例4. 变量的命名规则
- 使用英文命名, 名称可以体现变量的用途
- 当时变量名称由两个单词组成的时候, 使用小驼峰写法
- 变量首字符必须是$, _, 字母开始, 其它字符可以是$, _, 字母, 数字
- 有些系统的关键字和保留字不能用来做变量名称
// 存放年龄
var age = 100;
var hobby = '篮球';
// 双单词变量
var goodsList;
// 关键字和保留字不能做变量名称
var break = 222;
例5. 复杂类型1-对象
<script>
// 声明一个对象变量, 用来存放一个人的信息
var person = {
// 键值对: 左边是键(属性,也是对象), 右边叫值
username: '张三',
age: 100,
hobby: '犯罪',
address: '外国'
};
// 读取对象的信息
console.log('用户名:',person.username);
console.log('用户的爱好:',person['hobby']);
// 修改对象的信息
person.username = '李四';
person.age = 80;
console.log('person:', person);
</script>
例6. 复杂数据类型2-数组
<script>
// 数组(列表), a,b,c,d...叫做数组的成员
var list = ['a', 'b', 'c', 'd', 'e','f'];
// 读取数组的值
console.log('第一个成员:',list[0]); // 第一个成员的值,0叫做数组的下标
console.log('第二个成员',list[1]); // 第二个成员的值
// 数组的长度
console.log('数组的长度:', list.length);
// 最后一个成员
console.log('最后一个成员:',list[list.length-1]);
// 修改数组成员的值
list[3] = 'xx';
console.log('list',list);
</script>
练习:
- 声明数组
- 声明一个数组, 存放本组同学的名单
- 打印数组的第一个成员和最后一个成员
- 打开网站: http://fresh.huruqing.cn/
- 声明一个对象, 存放首页商品列表的其中一个商品信息
- 声明一个对象, 存放购物车列表的其中一个商品信息
- 声明一个数组, 存放订单列表
(三) 运算符
(1) 常见运算符
+ - * /特别注意: 字符+其它 = 字符串- % 取余数
- = 赋值
- ==和=== 判断两个两个变量是否相等=
<script>
var a = 20;
var b = 30;
var c = '20';
// +-*/
console.log('a+b=',a+b);
console.log('a-b=',a-b);
console.log('a*b=',a*b);
console.log('a/b=',a/b);
// 取余
console.log('a%b=',a%b);
// 计算的结果可以声明一个变量来存储
var result = a+b*c/a;
console.log('result=',result);
// 判断是否相等
console.log('a==c',a==c); // true 等于
console.log('a===c',a===c); // true 恒等于/全等于
// 注意:等有一个加数是字符串的时候,就是字符串拼接, 而不是相加
console.log('a+c=',a+c);
console.log('张三'+'李四');
</script>
(2) 逻辑运算
- 逻辑与 && 表示并且的意思
- 逻辑或 || 表示或者的意思
- 取反运算!
var a = true;
var b = true;
var c = false;
var m = a&&b;
var n = a&&c;
var x = a||b;
var y = a||c;
var z = !a;
(3) 数据类型转换
- 转数字
- 转字符串
- 转布尔
(四) 流程控制语句
三种语句
- 顺序, js代码默认是从上往下去执行的
- 分支结构
- 循环结构
例1. 顺序结构
<script>
console.log(1);
console.log(2);
console.log(3);
</script>
例2. 分支结构
例2.1 if else举例
<script>
// isRain是否下雨
var isRain = false;
// 如果isRain为true,则执行它后面{}的代码, 否则执行else后面的代码
if(isRain) {
console.log('我就带伞出门');
} else {
console.log('我就带帽出门');
}
</script>
例2.2 自动转换规则
- if后面括号里的变量会自动转换类型, 转换成布尔类型
- undefined, null, 0, 200, 一般情况下, 变量的意思包含"空,没有"的时候, 会转换成false, 否则转成true
<script>
var a = 0;
// a会自动转换为false, 所以打印2222
if (a) {
console.log(11111);
} else {
console.log(22222);
}
</script>
例2.3 多重判断
// 多重判断
if (sex === '男') {
alert('先生, 请进');
} else if (sex === '女') {
alert('女士, 请进');
} else {
alert('性别未知');
}
例2.4 三目运算符
<script>
var isRain = true;
var msg = isRain?'今天下雨了':'今天没下雨';
console.log(msg);
</script>
例3. 循环结构
例3.1 简单的for循环
<script>
// i=0,1,2满足条件, 执行{}里的代码
for(var i=0;i<3;i++) {
console.log(i);
}
</script>
例3.2 打印所有的数组成员
<script>
var list = [
"张三",
"李四",
"王五",
"陈六",
"林七",
]
for(var i=0;i<list.length;i++) {
console.log(list[i]);
}
</script>
例3.3 数字累加
<script>
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum = sum + i;
console.log(i, sum);
}
</script>
(五) 函数
1.声明和调用函数
例1.1 定义一个两数相加的函数并调用
例1.2 定义一个1-100累加的函数并调用
2.函数传参
例2.1定义一个两数相加的可传参的函数
例2.2定义一个数字累加可传参的函数
3.对象里的函数
(六) 数组常用方法
- join()
- push()
- pop()
- includes()
- filter()
- map()
- slice()
- splice()
1. join()
把数组变成字符串
var arr = ['张三','李四','王五'];
// 无参数
var str = arr.join();
console.log(str);
// 一个参数: 连接符, 默认用逗号进行连接
var str = arr.join(' ==> ');
console.log(str);
2. push()和pop()
pop() 删除数组的最后一个元素并返回删除的元素。
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
3. includes()
// 检查字符串是否包含'web'
var boo = str.includes('web');
console.log(boo);
4. filter()
检测数组元素，并返回符合条件所有元素的数组。
// 成员是基本数据类型
var arr = [18, 28, 13, 48, 48];
// 找出大于20的成员
var newArr = arr.filter(function(item) {
return item > 20;
});
console.log(newArr);
// 数组成员是引用数据类型
var arr = [
{ name: "张三", age: 18 },
{ name: "李四", age: 28 },
{ name: "王五", age: 13 },
{ name: "李三", age: 48 },
{ name: "陈六", age: 48 },
];
// 找出年龄大于20的成员
var newArr = arr.filter(function(item) {
return item.age > 20;
})
console.log(newArr);
// 找出名字带"三"的成员
var newArr = arr.filter(function(item) {
return item.name.includes('三');
})
console.log(newArr);
5. map()
对原来成员进行修改, 返回一个新的数组, 新的数组跟原来数组长度一样, 但新数组成员可以与原数组成员有关系, 也可以没有关系
var arr = [
{ name: "张三", age: 18 },
{ name: "李四", age: 28 },
{ name: "王五", age: 13 },
{ name: "张三", age: 48 },
{ name: "陈六", age: 48 },
];
// 给数组每一个成员添加两个属性sex和address
var newArr = arr.map(function(item,index) {
item.sex = '未知';
item.address = '未知';
return item;
});
console.log(newArr);
// 生成一个新的数组, 数组成员由年龄组成
var newArr = arr.map(function(item,index) {
return item.age;
});
console.log(newArr);
// 生成一个新的数组, 数组成员全部为'aa', 此时得到的新数组跟原数组没有任何关系
var newArr = arr.map(function(item,index) {
return 'aa';
});
console.log(newArr);
6. slice()
选取数组的一部分，并返回一个新数组。
var arr = [
{name:'张三',age:18},
{name:'李四',age:28},
{name:'王五',age:13},
{name:'张三',age:48},
{name:'陈六',age:48},
];
// 截取下标为1-3的数组成员
var arr2 = arr.slice(1,3);
console.log(arr2);
var arr3 = arr.slice(2);
console.log(arr3);
7. splice()
可以删除数组中任意位置的成员, 还可以替换成员, 此方法会改变原来数组
// splice可以删除任意位置的成员(会改变原数组)
var arr = ['a','b','c','d','e'];
// 1. 删除成员:从位置1开始, 删除1个
arr.splice(1,1);
console.log(arr);
// 第一个参数表示删除开始的下标, 第二个参数表示删除的个数
arr.splice(2,2);
console.log(arr);
练习和作业
计算总价
// 商品数组列表 var goodsList = [ { productId: "94217104", buyNum: 1, masterName: "【山西】红富士苹果 8-10枚5斤装（果径80mm/枚）", slaveName: "生态基地种植 饱满圆润脆甜 皮薄肉厚多汁", userId: "60d6f0b08f119d3e25af8cef", price: "3480", cartId: "61c285c90ab3e6758a54904f", }, { productId: "104356809", buyNum: 1, masterName: "【云南】冰糖心丑苹果", slaveName: "原产基地直供 脆甜多汁爽口 自然糖心结晶", userId: "60d6f0b08f119d3e25af8cef", price: "3990", cartId: "61c2edee0ab3e6758a549055", }, { productId: "31129853", buyNum: 3, masterName: "四川安岳黄柠檬 3斤装（单果90-110g）", slaveName: "采自“中国柠檬之都” 个头圆润均匀 地道酸爽十足", userId: "60d6f0b08f119d3e25af8cef", price: "2390", cartId: "61c9bfd76a92be12aba9afd1", }, { productId: "97305541", buyNum: 2, masterName: "【四川】新鲜青柠檬 3斤（单果90-110g）", slaveName: "果园现摘现发 清新酸爽怡人 个头圆润饱满", userId: "60d6f0b08f119d3e25af8cef", price: "1990", cartId: "61c9bfde6a92be12aba9afd2", }, { productId: "88651149", buyNum: 2, masterName: "【福建】黄金百香果 大果 （单果70-100g）", slaveName: "醇香自然圆润 酸甜多汁可口 富含多种维生素", userId: "60d6f0b08f119d3e25af8cef", price: "5350", cartId: "61c9bfe76a92be12aba9afd3", }, ]; // 被选中的商品id数组 var idList = [ "61c9bfe76a92be12aba9afd3", "61c9bfde6a92be12aba9afd2", "61c9bfd76a92be12aba9afd1", ]; // 计算总价查找用户
var users = [ { name: "张三", sex: 1, // 男 age: 18, skill: [ "song", // 唱歌 "speak", // 说话 "eat", // 吃饭 ], }, { name: "李四", sex: 0, // 女 age: 23, skill: [ "play", // 玩 "speak", "eat", ], }, { name: "王五", sex: 1, age: 34, skill: [ "song", "sleep", // 睡觉 "eat", ], }, { name: "赵六", sex: 0, age: 19, skill: [ "song", "sleep", "dance", // 跳舞 ], }, ]; function findUser(users) { // 请在此处补齐代码, 筛选出同时具有"speak"和"song"技能的用户, 并将他们的名字, 性别, 年龄和技能用中文在控制台打印出来 }改造数组
将以下数组成员变成 {label:'xxx', value:'xxxx'} 的形式, 其中label对应数组成员的name属性, value对应数组成员的id属性
var list = [{"name":"梁芳","sex":"女","id":"001"},{"name":"萧艳","sex":"男","id":"002"},{"name":"宋洋","sex":"女","id":"003"},{"name":"卢伟","sex":"男","id":"004"},{"name":"康杰","sex":"男","id":"005"}] // var newList = [{label: '梁芳', value: '001'}, ....];
(七) 使用JavaScript对页面增删改查
- 获取元素节点
- 修改元素样式
- 添加元素
- 删除元素